<template>
  <!-- 地图 -->
  <div :id="chartId" class="chart"></div>
</template>

<script>
import {hexToRgba, resize, spaceTxt, downloadChartImg} from '@/utils/utils'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
    }
  },
  data() {
    return {
      chart: null,
      graphType: 'map',
      colors: ['#79e2ff', '#A5F7B9']
    }
  },
  methods: {
    init() {
      let seriesData = this.getSeriesData()
      let allvalue = []
      this.chartData.data.forEach(v => {
        allvalue.push(v.value)
      })
      let option = {
        tooltip: {
          confine: true,
          show: true,
          trigger: 'item',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            color: "#000"
          },
          formatter: (params) => {
            let marker = params.marker
            let data = params.data
            if (data) {
              let name = data.label || data.name
              let str = `${marker}${name}:${data.value}`
              return str
            } else {
              marker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(176,180,230,1);"></span>`
              let str = `${marker}${params.name}:-`
              return str
            }
          }
        },
        backgroundColor: '#fff',
        visualMap: {
          // type: 'piecewise',
          type: 'continuous',
          show: false,
          left: '5%',
          bottom: '40px',
          min: 0,
          max: Math.max(...allvalue),
          text: ['高', '低'],
          showLabel: false,
          itemGap: 0,
          textGap: 50,
          inRange: {
            color: ["#ced1f3", "#b0b4e6", "#9095d7", "#767ccb", "#4950b7"] // this.colors.slice(0, 5) //["#ced1f3", "#b0b4e6", "#9095d7", "#767ccb", "#4950b7"]
          }
          
        },
        series: seriesData
      }
      this.chart.setOption(option, true)
    },
    getSeriesData() {
      let mapName = this.chartData.mapName
      let mapData = this.chartData.mapData
      this.$echarts.registerMap(mapName, mapData)
      let seriesData = [
        {
          type: 'map',
          map: mapName,
          label: {
            show: false,
            fontSize: 12
          },
          itemStyle: {
            // borderColor: "#fff"
          },
          emphasis: {
            itemStyle: {
              label: { show: true },
              areaColor: "#ffb478",
              color: "#fff",
              borderColor: "#fff"
            }
          },
          data: this.chartData.data,
        }
      ]
      return seriesData
    },
    changeGraphType(type) {
      this.graphType = type
      this.init()
    },
    // 保存图片
    downloadImg() {
      downloadChartImg(this.chart)
    }
  },
  watch: {
    chartData() {
      if (this.chartData.mapName !== '') {
        this.init()
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId))
    this.init()
  },
  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>

</style>